<!DOCTYPE HTML>
<html>
    
    <head>    
        <meta charset="UTF-8">
        <title>RIGHT, R-Interactive-Graphics-via-HTml</title>       
        <link  rel="stylesheet" href="right.css">       
    </head>    
    <body>
   		<div id="content">		
		 	<div id="histContainer2" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; "oncontextmenu="return false;"></div>
		    <div id="histContainer3" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; "oncontextmenu="return false;"></div>
		    <div id="scatterContainer1" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; "oncontextmenu="return false;"></div>
		    <div id="scatterContainer2" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; "oncontextmenu="return false;"></div>
		</div>		    
	 	<script src="kinetic-v4.3.1.js"></script>
	    <script src="structure.js"></script>
	    <script src="common.js"></script>	    
	    <script>
	//		createMainStructure("datafiles/diamonds-from-R_1K.csv");//mainArr = data, labelArr= column1     
		</script> 
    <script src="scatter.js"></script>
    <script src="hist.js"></script>
    <script src="box.js"></script>
    <script src="node_event.js"></script>
   
    <script>        
    	var mainObj = new readCSV("datafiles/Theoph-from-R.csv");
  
		var scatter01 = new Scatter(mainObj, {  x:'subject',y:'wt', color:'conc',width:250, height:250, legend:'left'});
		alert(scatter01.constructor);
		scatter01.draw(1);
		eventTrigger(scatter01);
		var scatter02 = new Scatter(mainObj, {  x:'clarity',y:'depth', color:'depth',width:250, height:250,legend:'right'});
		scatter02.draw(2);    
		eventTrigger(scatter02);	
		var hist02 = new Hist(mainObj, { bin: 2	, x:'x', width:250, height:250 });
		hist02.draw(2);
		eventTrigger(hist02);
		var hist03 = new Hist(mainObj, { bin: 2	, x:'cut', width:250, height:250 });
		hist03.draw(3);
		eventTrigger(hist03);
		</script>    
	
		<script src="table.js"></script>
		
    	<div >
    	<h2>Search</h2>
				<ul>
					<li><a href="about.html">How To Search</a></li>					
				</ul>	 
				<script src="search.js"></script>
			<p>
				<form id="searchForm1">  
					<textarea id ="searchBox" name = "searchId"  style="height:50px;width:200px;" placeholder="Please input boolean statement..."  onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"></textarea>
					<p></p>
					<a id="searchBtn" href="#" class="myButton" onClick ="booleanSearch(searchForm1); printAns(); return false;">Search</a>	
					<a id="clearBtn" href="#" class="myButton"  onClick ="clearSearchBox(); return false;">Clear</a>
				</form>  
			</p>
			<h2>Other Functions</h2>			
				<p>
					<a id="showTable" href="#" class="myButton" onClick =" return false;">Show Table</a>	
					<a id="hideTable" href="#" class="myButton" onClick =" return false;">Hide Table</a>
				</p>	
				<a id="saveImg" href="#" class="myButton" onClick ="alert( return false;">Save as image</a>	
				<a id="sendImg" href="about.html" class="myButton" >Send an image to Email</a>	
				<p></p>	
		</div> 
		<div id = "footer">	
			<p>
			Created by <a class="credit" href="about.html">RIGHT</a><br />
				Copyright &copy; {Jaewlee, flammy, sch8906, thepotter89} @ gmail.com
			</p>
		</div>	

		 
    <script src="button_event.js"></script>    
    </body>
</html>
